<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col group">
			<view class="fun-flex-col fun-self-stretch group_2">
				<text class="fun-self-start font text_3 text_4">Your Address</text>
				<view class="fun-flex-row fun-items-center fun-justify-between group_3">
					<text class="font text_5">{{address}}</text>
					<image class="image_5" src="@/static/account/fuzhi.png" @click="copy"/>
				</view>
				
				<view class="fun-flex-col fun-self-stretch section_3">
					<view class="fun-flex-row fun-items-baseline fun-justify-between">
						<text class="font text_6">Withdrawable Amount</text>
						<text class="font_2 text_7">{{roundToDecimal(walletInfo.balance - walletInfo.freeze)}} {{withdrawalInfo.showCurrency}}</text>
					</view>
					<!-- <text class="fun-self-end text_8 fun-mt-12">$10,095.35</text>
					<view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch fun-mt-12">
						<text class="font text_9">Remainning daily limit</text>
						<text class="font_2 text_10">1,000,000 USDT</text>
					</view> -->
				</view>
			</view>
			<view class="divider"></view>
			
			<view class="fun-flex-col group_4">
				<view class="fun-flex-col input-list">
					<view class="font text_3">Amount to withdraw</view>
					<view class="fun-flex-row fun-justify-between fun-items-center group_6">
						<input class="font_3 text-wrapper" v-model="amount" placeholder="Enter Amount to withdraw" type='digit'/>
						<text class="font text_14">{{withdrawalInfo.showCurrency}}</text>
					</view>
					<text class="font_2">The minimum withdrawal amount is {{withdrawalInfo.minAmount}} {{walletInfo.showCurrency}}.</text>
				</view>
				
				<view class="fun-flex-col input-list">
					<view class="font text_3">transaction fee</view>
					<view class="fun-flex-row fun-justify-between fun-items-center group_6">
						<text class="font_3 text-wrapper">{{feeAmount}}</text>
						<text class="font text_14">{{withdrawalInfo.showCurrency}}</text>
					</view>
					<text class="font_2">The transaction fee rate is {{withdrawalInfo.serviceRate}}%.</text>
				</view>
				<view class="fun-flex-col input-list">
					<view class="font text_3">Post-fee withdrawal amount</view>
					<view class="fun-flex-row fun-justify-between fun-items-center group_6">
						<text class="font_3 text-wrapper">{{withdrawalInfo.fee}}</text>
						<text class="font text_14">{{withdrawalInfo.showCurrency}}</text>
					</view>
					<text class="font_2">Please note: Your exchange, wallet provider, or network may impose their own fees, which could affect the final amount you received.</text>
				</view>
			</view>
		</view>
		
		<view class="fun-flex-row fun-justify-between group_10">
			<view class="text-wrapper_2 font_4 text_21" @click="close">Close</view>
			<view class="text-wrapper_3 font_4 text_22" @click="withdraw">Withdraw</view>
		</view>
		
		<common-modal v-if='isShowModal' :popData="popData" @done="done" @close='isShowModal = false'></common-modal>
	</view>
</template>

<script>
	import {roundToDecimal} from "@/common/js/func.js"
	import {withdrawalAddress,withdrawalMethod,withdrawal,wallet} from "@/api/account.js"
	import commonModal from "@/components/commonModal.vue";
	export default {
		data() {
			return {
				queryData:{
					currency:"usdttrc20"
				},
				walletInfo:{},
				withdrawalInfo:{},
				address:"",
				popData:{},
				amount:"",
				isShowModal:false,
				roundToDecimal
			};
		},
		
		onLoad() {
			this.getWalletInfo()
			this.getWithdrawalAddress()
			this.getWithdrawalMethod()
		},
		
		computed:{
			feeAmount(){
				return roundToDecimal(this.amount * this.withdrawalInfo.serviceRate / 100)
			}
		},

		methods: {
			getWithdrawalAddress(){
				withdrawalAddress(this.queryData).then(res => {
					if(res.code == 0){
						this.address = res.data?.address || '';
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			getWithdrawalMethod(){
				withdrawalMethod().then(res => {
					if(res.code == 0){
						this.withdrawalInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			getWalletInfo(){
				wallet().then(res => {
					if(res.code == 0){
						this.walletInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},

			withdraw(){
				if(!this.amount){
					if(!this.amount){
						this.UTILS.logStr("Amount to withdraw");
						return
					}
				}
				if(Number(this.amount) < Number(this.withdrawalInfo.minAmount)){
					this.UTILS.logStr(`Not less than ${this.withdrawalInfo.minAmount}${this.withdrawalInfo.showCurrency}`);
					return
				}
				this.popData = {
					icon:require("@/static/common/success.png"),
					title:"Withdraw request sent",
					content:"We are processing your withdrawal request. Please check the record for updates.",
					btnText:["Done"]
				}
				this.isShowModal = true;
			},
			
			done(){
				const params = {
					methodId:this.withdrawalInfo.methodId,
					amount:Number(this.amount),
					currency:"usdttrc20"
				}
				withdrawal(params).then(res => {
					if(res.code == 0){
						this.UTILS.logStr(res.msg || "withdrawal Success");
						uni.switchTab({
							url:'/pages/account/index',
							animationDuration: 2000
						})
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			close(){
				uni.switchTab({
					url: '/pages/account/index'
				});
			},
			
			copy(){
				uni.setClipboardData({
					data: this.address,
					success: ()=> {
						this.UTILS.logStr("Copy success")
					}
				});
			}
		},
		components:{
			commonModal
		}
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-110 {
		margin-left: 220rpx;
	}

	.mt-13 {
		margin-top: 26rpx;
	}

	.mt-23 {
		margin-top: 46rpx;
	}

	.mt-25 {
		margin-top: 50rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.group {
			padding-top: 40rpx;
			padding-bottom: 100rpx;
			height: calc(100% - 168rpx);
			overflow-x: auto;
			.group_2 {
				padding: 0 30rpx 30rpx;
				.group_3 {
					margin-top: 20rpx;
					.text_5 {
						color: #131416;
						flex: 0.98;
						white-space: nowrap; /* 确保文本在一行内显示 */
						overflow: hidden; /* 超出容器部分隐藏 */
						text-overflow: ellipsis;
					}
					.image_5 {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.section_3 {
					margin-top: 36rpx;
					padding: 32rpx 48rpx;
					background-color: #f6f6f6;
					border-radius: 8rpx;
					overflow: hidden;

					.text_7 {
						color: #22262e;
					}

					.text_8 {
						color: #777e90;
						font-size: 24rpx;
						font-family: SF Pro Display;
					}

					.text_9 {
						color: #353945;
					}

					.text_10 {
						margin-right: 8rpx;
						color: #000000;
					}
				}
			}

			.divider {
				margin: 0 16rpx;
				background-color: #f6f6f6;
				height: 2rpx;
			}

			.group_4 {
				padding: 36rpx 32rpx 0 32rpx;
				.input-list{
					.group_6 {
						margin-top:32rpx;
						margin-bottom: 12rpx;
						padding-bottom: 12rpx;
						border-bottom: 2rpx solid #7F7F7F;;
						.text-wrapper {
							flex: 1;
							padding: 8rpx 0;
							
						}
					}
				}
				.input-list:not(:last-child){
					margin-bottom: 40rpx;
				}
			}

			.text_3 {
				text-transform: capitalize;
			}

			.font_2 {
				font-size: 28rpx;
				font-family: SF Pro Display;
				color: #777e90;
			}
		}

		.font {
			font-size: 32rpx;
			font-family: SF Pro Display;
			color: #000000;
		}

		.group_10 {
			padding: 40rpx 40rpx;
			border-top: solid 2rpx #f6f6f6;

			.text-wrapper_2 {
				padding: 20rpx 0;
				flex: 0.48;
				background-color: #ffffff;
				border-radius: 10rpx;
				border: solid 2rpx #1a7b99;
				color: #1a7b99;
				text-align: center;
			}

			.text-wrapper_3 {
				padding: 20rpx 0;
				flex: 0.48;
				background-color: #1a7b99;
				border-radius: 10rpx;
				color: #ffffff;
				text-align: center;
			}

			.font_4 {
				font-size: 32rpx;
				font-family: SF Pro Display;
				font-weight: 700;
			}
		}
	}
</style>